<template>
   <div class="recom-view">
       <div class="recom-view-img" v-if="logo">
            <img :src="logo" alt="">
        </div>
        <div class="recom-view-cont">
            <h3 class="recom-view-cont-title">推荐人ID:</h3>
            <input class="recom-view-cont-input" v-model="tjId" type="text" placeholder="请填写推荐人ID">
        </div>
        <div class="btn recom-view-btn" @click="handleClickTj">提交</div>
   </div>
</template>

<script>
import Vue from 'vue'
import { setRecommendId, getRecommendViewConfig } from '@/api/user/user'
import { openPage } from '@/utils/utils'
import small from '@/smallapp/small'
export default Vue.extend({
  data() {
    return {
      logo: '',
      tjId: ''
    }
  },
  mounted() {
    this.getRecommendViewConfigFun()
  },
  methods: {
    getRecommendViewConfigFun() {
      getRecommendViewConfig().then(res => {
        if (res.status == 1) {
          this.logo = res.data.logo
        } else {
          this.$Error(res.msg)
        }
      })
    },
    handleClickTj() {
      if (this.tjId) {
        setRecommendId({ uid: this.tjId }).then(res => {
          if (res.status == 1) {
              this.$Error('提交成功')
              small.wxCache('pid', this.tjId)
              setTimeout(() => {
                openPage(res.data.redirect_url)
              }, 1500)
          } else {
            this.$Error(res.msg)
          }
        })
      } else {
        this.$Error('请填写推荐人ID')
      }
    }
  }
})
</script>

<style lang="scss">
    .recom-view {
        width: 100%;
        height: 100%;
        &-img {
            display: block;
            width: 100%;
            margin: 100px auto 40px;
            max-width: 340px;
            img {
                display: block;
                width: 100%;
            }
        }
        &-cont {
            padding:0 80px;
            &-title {
                font-size: 28px;
                color: #333;
                line-height: 90px;
                font-weight: 400;
                margin: 0;
            }
            &-input {
                width: 100%;
                height: 90px;
                border-radius: 60px;
                border: 2px solid #c9c9c9;
                padding:0 30px;
                font-size: 28px;
                box-sizing: border-box;
                input{
                    border: 0;
                    outline: none;    
                    -webkit-appearance: none;
                    appearance: none;
                }
            }
        }
        &-btn {
            margin-top: 50px;
            margin: 50px 80px 0;
            display: block;
            width: calc(100% - 160px);
            font-size: 28px;
            height:90px;
            line-height: 90px;
            text-align: center;
            padding: 0;
            overflow: hidden;
            border-radius: 60px;
            background-color: #368ef4;
            color: #fff;
        }
    }
</style>